<template>



    <div class="openUploadListDiv" v-show="openUploadListDivIsshow">
        <el-icon style="cursor: pointer" @click="openUploadListDiv()">
            <DArrowLeft />
        </el-icon>
    </div>

    <transition name="el-zoom-in-top">
        <el-card class="UploadListDiv" v-show="uploadListDivShow">
            <div class="UploadListTitleDiv">
                <div class="cug-center-text">


                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    文件上传列表
                </div>

                <div  class="cug-right-icons">
                    <el-icon class="cug-right-icon" @click="closeUploadListDiv()">
                        <CircleClose />
                    </el-icon>
                    <el-icon class="cug-right-icon" @click="uploadTableFolat()">
                        <Remove />
                    </el-icon>
                    <el-icon class="cug-right-icon" @click="clearUploadTable()">
                        <Refresh />
                    </el-icon>
                </div>


            </div>
            <!-- border -->
            <el-table :data="uploadFileTable" height="100%" style="width: 100%">
                <el-table-column prop="name" label="文件名称" width="180">
                </el-table-column>
                <el-table-column prop="size" label="文件大小" width="120">
                    <template #default="scope">
                        <span>{{
                                (scope.row.size / (1024 * 1024)).toFixed(4)
                        }}&nbsp;MB</span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="100" style="text-align: center">
                    <template #default="scope">
                        <span>
                            <el-tag type="success" v-if="scope.row.status == '完成'">{{ scope.row.status }}</el-tag>
                            <el-tag v-if="scope.row.status == 'ready'">准备</el-tag>
                            <el-tag type="danger" v-if="
                                scope.row.status != '完成' &&
                                scope.row.status != 'ready'
                            ">{{ scope.row.status }}</el-tag>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="uid" label="进度">
                    <template #default="scope">
                        <el-progress color="#fd6c40" v-if="scope.row.uid > 100" :percentage="0">
                        </el-progress>
                        <el-progress color="#fd6c40" v-if="scope.row.uid < 101" :percentage="scope.row.uid">
                        </el-progress>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </transition>
</template>
    
<script setup lang='ts'>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';

const props = defineProps({

    currentPath: {
        type: String,
        default: ''
    }

})

//上传完文件之后需要有刷新操作
const emits = defineEmits(["afterUploadFile"])


let uploadFileTable = ref([] as Array<Object>)


//确认上传文件
const submitUpload = (uploadFileList: Array<Object>) => {


    // console.log(this.uploadFileList)

    // (this.$refs['upload'] as any).submit( );  
    var fileList: object[] = []
    fileList = uploadFileList;
    uploadFileTable.value = uploadFileTable.value.concat(uploadFileList)
    uploadFile(0, fileList);
    uploadFileList = [];

}


// 上传文件
const uploadFile = (i: number, fileList: Array<Object>) => {

    uploadListDivShow.value = true;

    if (i < fileList.length) {
        let file: any = fileList[i];
        let paramFormData = new FormData();

        var currentProfileIndex = (uploadFileTable.value || []).findIndex((profile) => profile === file);

        console.log(currentProfileIndex)


        console.log(uploadFileTable.value[currentProfileIndex])
        const token = localStorage.getItem("Authorization");
        const proToken = localStorage.getItem("proToken");
        paramFormData.append("file", file['raw']);
        paramFormData.append("filename", file['name']);
        paramFormData.append("path", props.currentPath);
        axios({
            url: "/surveyDataServer/fileManage/add",
            method: 'post',
            data: paramFormData,
            headers: {
                'Content-Type': 'multipart/form-data',
                'Authorization': `Bearer ${token}`,
                'proToken': `${proToken}`
            },
            maxBodyLength: -1,

            onUploadProgress: progressEvent => {

                console.log(uploadFileTable.value);
                // progressEvent.loaded:已上传文件大小
                // progressEvent.total:被上传文件的总大小
                //进度条
                (uploadFileTable.value[currentProfileIndex] as any)['uid'] = ((progressEvent.loaded / (progressEvent as any).total ) * 100) | 0;
            }
        }).then((res) => {

            if (res.data.code != 200) {
                (uploadFileTable.value[currentProfileIndex] as any)['status'] = res.data;

            } else {
                (uploadFileTable.value[currentProfileIndex] as any)['status'] = "完成";

            }
            ElMessage.success({ message: res.data.message })
            uploadFile(i + 1, fileList);
        })
    }
    emits("afterUploadFile")
}

const clearUploadTable = () => {
    uploadFileTable.value.splice(0, uploadFileTable.value.length)
}

const uploadListDivShow = ref(false);
const openUploadListDivIsshow = ref(false);

const closeUploadListDiv = () => {
    uploadListDivShow.value = false;
    openUploadListDivIsshow.value = true;
}
const uploadTableFolat = () => {
    uploadListDivShow.value = false;
    openUploadListDivIsshow.value = true;
}

const openUploadListDiv = () => {
    uploadListDivShow.value = true;
    openUploadListDivIsshow.value = false;
}

//上传文件的方法 暴露给父组件调用
defineExpose({
    submitUpload
})


</script>
    
<style scoped>
.UploadListDiv {
    position: absolute;
    border-radius: 20px;
    right: 20px;
    bottom: 30px;
    width: 600px;
    height: 300px;
    z-index: 99;
}

.openUploadListDiv {
    display: flex;
    justify-content: center;
    align-items: center;


    font-size: 20px;
    width: 32px;
    border-radius: 13px;
    height: 32px;
    color: white;
    position: absolute;
    background: #fd6c40;
    right: 2px;
    bottom: 300px;
    z-index: 99;
}

.cug-right-icons {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    float: right;
    width: 25%;
    height: 30px;

    font-size: 20px;

}

.cug-center-text {
    display: flex;
    justify-content: center;
    align-items: center;

    float: left;
    width: 75%;
    height: 30px;


    font-size: 20px;
}

.cug-right-icon {
    cursor: pointer;
    margin-left: 2px;
}

.cug-right-icon:hover {
    color: #fd6c40;
}
</style>